<template>
  <div class="personal-center">
    <!-- 标题 -->
    <div class="page-header">
      <h1 class="page-title">{{ $t('assets.personalCenter.title') }}</h1>
    </div>

    <!-- 个人信息 -->
    <el-card class="profile-card">
      <div class="profile-info">
        <!-- 左边头像 -->
        <div class="avatar-section">
          <el-avatar :size="80" class="user-avatar">
            <el-icon><User /></el-icon>
          </el-avatar>
        </div>

        <!-- 右边信息 -->
        <div class="info-section">
          <div class="info-row">
            <span class="info-label">{{ $t('assets.personalCenter.username') }}：</span>
            <span class="info-value">{{ userInfo.username }}</span>
            <span class="phone-label">{{ $t('assets.personalCenter.phone') }}：</span>
            <span class="phone-value">{{ userInfo.phone }}</span>
            <el-button type="text" class="modify-btn" @click="handleModifyPhone">{{ $t('assets.personalCenter.modify') }}</el-button>
          </div>

          <div class="info-row">
            <span class="info-label">{{ $t('assets.personalCenter.loginName') }}：</span>
            <span class="info-value">{{ userInfo.loginName }}</span>
            <span class="email-label">{{ $t('assets.personalCenter.email') }}：</span>
            <span class="email-value">{{ userInfo.email }}</span>
            <el-button type="text" class="modify-btn" @click="handleModifyEmail">{{ $t('assets.personalCenter.modify') }}</el-button>
          </div>

          <div class="info-row">
            <span class="info-label">{{ $t('assets.personalCenter.createTime') }}：</span>
            <span class="info-value">{{ userInfo.createTime }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 安全设置 -->
    <el-card class="security-card">
      <div class="security-header">
        <h3>{{ $t('assets.personalCenter.securitySettings') }}</h3>
      </div>

      <div class="security-content">
        <!-- 登录密码 -->
        <div class="security-item">
          <div class="security-label">{{ $t('assets.personalCenter.loginPassword') }}</div>
          <div class="security-desc">{{ passwordDesc }}</div>
          <el-button type="text" class="security-action" @click="handleModifyPassword">{{ $t('assets.personalCenter.modify') }}</el-button>
        </div>

        <!-- 安全手机 -->
        <div class="security-item">
          <div class="security-label">{{ $t('assets.personalCenter.securityPhone') }}</div>
          <div class="security-desc">{{ phoneSecurityDesc }}</div>
          <el-button type="text" class="security-action" @click="handleModifySecurityPhone">{{ $t('assets.personalCenter.modify') }}</el-button>
        </div>

        <!-- 安全邮箱 -->
        <div class="security-item">
          <div class="security-label">{{ $t('assets.personalCenter.securityEmail') }}</div>
          <div class="security-desc">{{ emailSecurityDesc }}</div>
          <el-button type="text" class="security-action" @click="handleSetSecurityEmail">{{ $t('assets.personalCenter.setup') }}</el-button>
        </div>
      </div>
      <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" @click="handleSave" :loading="saving">{{ $t('assets.personalCenter.save') }}</el-button>
      <el-button @click="handleReset">{{ $t('assets.personalCenter.reset') }}</el-button>
    </div>
    </el-card>

    
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { t as $t } from '@/plugins/i18nPlugin'

// 用户信息接口
const UserInfo = {
  username: '',
  loginName: '',
  createTime: '',
  phone: '',
  email: ''
}

// 响应式数据
const saving = ref(false)

// 用户信息数据
const userInfo = ref({
  username: '王力群ABCabc',
  loginName: '15012312300',
  createTime: '2013-05-10 12:10:00',
  phone: '150*****00',
  email: '150*****00@qq.com'
})

// 计算属性 - 安全设置描述
const passwordDesc = computed(() => {
  return $t('assets.personalCenter.passwordDesc')
})

const phoneSecurityDesc = computed(() => {
  return `${$t('assets.personalCenter.bound')}：${userInfo.value.phone.replace(/(\d{3})\d{5}(\d{2})/, '$1*****$2')}`
})

const emailSecurityDesc = computed(() => {
  return $t('assets.personalCenter.emailSecurityDesc')
})

// 方法
const handleModifyPhone = () => {
  ElMessage.info('修改手机号码功能')
}

const handleModifyEmail = () => {
  ElMessage.info('修改邮箱功能')
}

const handleModifyPassword = () => {
  ElMessage.info('修改密码功能')
}

const handleModifySecurityPhone = () => {
  ElMessage.info('修改安全手机功能')
}

const handleSetSecurityEmail = () => {
  ElMessage.info('设置安全邮箱功能')
}

const handleSave = async () => {
  saving.value = true
  try {
    // 模拟保存操作
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success($t('assets.personalCenter.saveSuccess'))
  } catch (error) {
    ElMessage.error($t('assets.personalCenter.saveFailed'))
  } finally {
    saving.value = false
  }
}

const handleReset = () => {
  // 重置表单数据
  userInfo.value = {
    username: '王力群ABCabc',
    loginName: '15012312300',
    createTime: '2013-05-10 12:10:00',
    phone: '150*****00',
    email: '150*****00@qq.com'
  }
  ElMessage.info($t('assets.personalCenter.resetSuccess'))
}
</script>

<style scoped>
.personal-center {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页面标题 */
.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

/* 个人信息卡片 */
.profile-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: none;
}

.profile-info {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
}

/* 头像区域 */
.avatar-section {
  flex-shrink: 0;
}

.user-avatar {
  background-color: #f0f0f0;
  color: #909399;
  font-size: 32px;
}

/* 信息区域 */
.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 16px;
  line-height: 1.5;
}

.info-label {
  font-size: 14px;
  color: #606266;
  min-width: 80px;
}

.info-value {
  font-size: 14px;
  color: #303133;
  min-width: 120px;
}

.phone-label,
.email-label {
  font-size: 14px;
  color: #606266;
  margin-left: 40px;
  min-width: 80px;
}

.phone-value,
.email-value {
  font-size: 14px;
  color: #303133;
  min-width: 120px;
}

.modify-btn {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
  margin-left: 8px;
}

.modify-btn:hover {
  color: #66b1ff;
}

/* 安全设置卡片 */
.security-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: none;
}

.security-header {
  padding: 20px 20px 0 20px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 20px;
}

.security-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
}

.security-content {
  padding: 0 20px 20px 20px;
}

.security-item {
  display: flex;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.security-item:last-child {
  border-bottom: none;
}

.security-label {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
  min-width: 80px;
  flex-shrink: 0;
}

.security-desc {
  flex: 1;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
  margin: 0 16px;
}

.security-action {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
  flex-shrink: 0;
}

.security-action:hover {
  color: #66b1ff;
}

/* 操作栏 */
.action-bar {
  display: flex;
  gap: 16px;
  padding: 20px 0;
}

.action-bar .el-button {
  padding: 10px 24px;
  font-size: 14px;
}
</style>
